<script setup lang="ts">
import { copyText } from "@/util/clipboard.ts";
import { hc } from "@/framework/vue/util/render.ts";
import { CopyOutlined } from "@ant-design/icons-vue";

interface Props {
  readonly?: boolean;
}

const props = defineProps<Props>();

const value = defineModel("value");
</script>

<template>
  <a-input v-bind="props" v-model:value="value">
    <template #suffix>
      <a-button @click="copyText(value)" :icon="hc(CopyOutlined)" type="text" size="small" shape="circle" />
    </template>
  </a-input>
</template>
